<template>
  <div class="login-container">
    <el-form ref="formRef" :model="loginForm" :rules="rules" class="login-form">
      <h3 style="text-align: center; margin-bottom: 20px">欢迎登录</h3>
      <el-form-item label="账号" prop="login">
        <el-input
          v-model="loginForm.login"
          placeholder="请输入用户名或邮箱"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="width: 100%">
          登录
        </el-button>
      </el-form-item>
      <div style="text-align: center">
        <router-link
          :to="{ name: 'Register' }"
          style="color: #409eff; text-decoration: none"
        >
          没有账号，前往注册
        </router-link>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElInput, ElForm, ElFormItem, ElButton } from "element-plus";
import type { FormRules } from "element-plus";
import { useRouter } from "vue-router";
import { adminLogin } from "@/api/admin/user";
import { userLogin } from "@/api/user/login";
import { account } from "@/type/user";
import { useAuthStore } from "@/stores/authStore";

const loginForm = ref<account>({
  login: "",
  password: "",
});

const formRef = ref(null); // 添加一个 ref 引用
const router = useRouter(); // 获取路由器实例

const rules: FormRules = {
  login: [{ required: true, message: "请输入用户名或邮箱", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
};

const onSubmit = () => {
  (formRef.value as any).validate(async (valid: boolean) => {
    if (valid) {
      try {
        // 登录成功后跳转到主页或其他页面
        if (loginForm.value.login === "admin") {
          const res = await adminLogin(loginForm.value);
          useAuthStore().setToken(res.data.token);
          router.push({ name: "AdminLayout" });
        } else {
          const res = await userLogin(loginForm.value);
          useAuthStore().setToken(res.data.token);
          router.push({ name: "HomeLayout" });
        }
      } catch (error) {
        console.error("登录失败:", error);
      }
    } else {
      console.log("表单验证失败!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.login-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("https://plus.unsplash.com/premium_photo-1733306466041-cc55ded2553f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw1fHx8ZW58MHx8fHx8");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.login-form {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  border: none; /* 移除边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 8px; /* 增加圆角半径 */
  background-color: rgba(255, 255, 255, 0.9); /* 提高背景透明度 */
  text-align: center;
  z-index: 1;

  /* 统一所有输入框的宽度 */
  .el-input__inner {
    width: 100%;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    transition: all 0.3s;
    &:focus {
      border-color: #409eff;
      outline: none;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
    }
  }

  /* 统一按钮的宽度 */
  .el-button--primary {
    width: 100%;
    background-color: #409eff;
    border-color: #409eff;
    &:hover {
      background-color: #66b1ff;
      border-color: #66b1ff;
    }
  }
}
</style>
